<template>
  <el-container class="common-layout">
    <el-aside>
      <div>
        <sidebar/>
      </div>
      </el-aside>
      <el-container>
        <el-header style="width:930px">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            style="margin-left:-60px"
          >
            <el-menu-item index="1">浏览记录</el-menu-item>
          </el-menu>
        </el-header>
      
        <el-main class="main" >
            <el-form :inline="true">
              <el-form-item class="el-menuSize">
                <el-input v-model="videoName" placeholder="视频名称"/>
              </el-form-item>
                <el-button style="margin-top:-20px;margin-left:-20px" @click="getHistoryMsg">搜索</el-button>
              <el-form-item>
          </el-form-item>           
          <el-form-item style="float:right"><el-button>批量删除</el-button>
          </el-form-item>
          <el-row v-for="i in historyList">
            <el-col :span="5"><div class="grid-content ep-bg-purple" />
              <img :src="i.momentBackup.cover" style="width: 169px;height: 101px;margin: 10px;">
            </el-col>
            <el-col :span="8" style="margin: auto;font-size:16px"><div class="grid-content ep-bg-purple-light" />
              <div>{{i.momentTitle}}</div>
              <div style="margin-left:10px">作品</div>
              <div>
                <el-avatar :src="i.momentBackup.creatorBackup.avatar" size="small"/>
                {{i.momentBackup.creatorBackup.name}}
              </div>              
            </el-col>
            <el-col :span="3" style="margin: auto"><div class="grid-content ep-bg-purple" />
              {{dayjs(i.updateTime).format('YYYY-MM-DD HH:mm:ss')}}
            </el-col>
            <el-col :span="5" style="margin:auto"><div class="grid-content ep-bg-purple-light" />
              <el-button type="danger" @click="deleteList">删除</el-button>
            </el-col>
          </el-row>
              <!-- <div>
                <div style="float:left" >
                  <el-row v-for="i in historyList" :span="5">
                  <img :src="i.momentBackup.cover" style="width: 169px;height: 101px;margin: 20px;">
                </el-row>
                </div >
                <div
                  style="float:left; padding:20px;height: 200px;">
                  <el-row v-for="i in historyList" :span="14">
                    <span>
                      {{i.momentTitle}}<br>
                            作品<br>
                        <el-avatar :src="i.momentBackup.creatorBackup.avatar" size="small"/>{{i.momentBackup.creatorBackup.name}}
                    </span> 
                  </el-row>
                </div>         
                <div>
                  <el-row v-for="i in historyList" :span="5" >
                    <div style="line-height:100px">
                      {{dayjs(i.updateTime).format('YYYY-MM-DD HH:mm:ss')}}
                    </div>
                    
                  </el-row>                    
                </div>
              </div> -->
              
            
              
          
              
                <!-- <el-col v-for="i in historyList" :span="5">
                        <img :src="i.momentBackup.cover" style="width: 169px;height: 101px;">
                  </el-col>
                  <el-col v-for="i in historyList" :span="5">
                    <p>
                          {{i.momentTitle}} <br>
                                 作品<br>
                          <el-avatar :src="i.momentBackup.creatorBackup.avatar"/>{{i.momentBackup.creatorBackup.name}}
                        </p> 
                        
                  </el-col>
                  <el-col v-for="i in historyList" :span="5">
                    <span>
                      {{dayjs(i.updateTime).format('YYYY-MM-DD HH:mm:ss')}}
                    </span></el-col> -->
              
              
            
              
              
                  
                  
                  
                        
                        
                  
            </el-form>
      </el-main>
      </el-container>
  </el-container>
 
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import {  ref ,onMounted} from "vue";
import practiceApi,{type historyListModel,type historyListModelAll} from '@/api/practice'
import sidebar from '@/views/practice/sidebar/index.vue'  
import { ElMessage } from 'element-plus';

const historyList = ref<any>()
const handleSelect = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const deleteList = ()=>{
   ElMessage.success('删除成功')
}
const activeIndex = ref('1')

const videoName = ref('')
const token = ref('ceddaee4-94de-4a12-96e1-3e7efc5601a0')
const pageSize = ref(10)
const pageNum = ref(0)
const msgList = ref()
const getHistoryMsg = async ()=>{
  let res = await practiceApi.gethistoryMsg(token.value,pageSize.value,pageNum.value,videoName.value)
  msgList.value = res.content
  historyList.value = msgList.value

}
onMounted(()=>{
getHistoryList()
})
const  getHistoryList = async ()=>{
let result = await (practiceApi.getHistoryList()) as any
historyList.value =result.content
}



</script>
<style scoped lang="less">

.common-layout{
background-color: rgb(245, 247, 249);

.main{
  width:950px;
  margin-left:-40px;
  margin-top:10px;
  background-color: white;
  min-height: 700px;
  .btn3{
    float: right;
  }
}
.el-menuSize{
  padding:0,10px;
}

}
</style>